<template>
  <div>
<!--        <div style="margin: 10px; font-size: 24px">{{activity.title}}</div>-->
<!--        <div style="margin: 10px 0; font-size: 13px; color: #666">{{activity.author}}-->
<!--          <span style="margin-left: 20px">{{activity.time}}</span>-->
<!--        </div>-->
<!--        <div style="box-shadow: 0 2px 4px rgba(0,0,0, .12);padding: 10px">-->
<!--          <div v-html="activity.content"></div>-->
<!--        </div>-->
    <el-container>
      <!--      <el-row>-->
      <!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <div style="margin: 10px; font-size: 24px">{{activity.title}}</div>-->
      <!--          <el-main><div v-html="activity.content"></div></el-main>-->
      <!--          <el-footer>Footer</el-footer>-->
      <!--        </el-col>-->
      <!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
      <!--      </el-row>-->

      <el-row :gutter="20" style="width: 100%;">
        <el-col :span="6" style="background-color: #ffffff;color: #000">
          <div class="grid-content bg-purple">2</div>
        </el-col>
        <el-col :span="12" style="box-shadow: 1px 4px 2px #a5a2a2;">
          <div style="margin: 10px; font-size: 24px; text-align: center">{{ activity.title }}</div>
          <div style="text-align: center">
            <span>{{start_time}} 至 </span>
            <span>{{end_time}} </span>
          </div>
          <el-main>
            <div v-html="activity.content">{{activity.content}}</div>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-col>
        <el-col :span="6" style="background-color: #ffffff;color: #000">
          <div class="grid-content bg-purple">2</div>
        </el-col>
      </el-row>
    </el-container>
  </div>

</template>

<script>
export default {
  name: "NewsDetail",
  data() {
    return {
      activity: [{startTime : '',enddTime: ''}],
      start_time: '',
      end_time: '',
    }
  },
  created() {
    this.aaa()
    this.sss()
  },
  methods: {
    aaa(){
      let id = this.$route.query.id

      if (!id) {
        return
      }
      this.$request.get('/activity/selectById/' + id).then(res => {

        if (res.code === '200') {
          this.activity = res.data
          this.$message.success("加载成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  时间格式化专用
    formatDate(timestamp){
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hour = date.getHours().toString().padStart(2, '0');
      const minute = date.getMinutes().toString().padStart(2, '0');
      const second = date.getSeconds().toString().padStart(2, '0');
      const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      return formattedDate
    },
    // 格式化，然后赋值
    sss(){
      let _this = this
      setTimeout( () =>{
        this.start_time = _this.formatDate( parseInt(this.activity.startTime))
        this.end_time = _this.formatDate( parseInt(this.activity.enddTime))
      }, 100);

    }
  },


}
</script>

<style scoped>

</style>